<template>
	<view>
		<u-sticky offset-top="0">
			<u-image src="/static/img/rank.png" width="100%" height="480rpx"></u-image>
			<view class="common">
				<u-grid :border="false" col="4" v-if="vote.groups && vote.groups.length > 0">
					<u-grid-item @click="select_group(-1)"><text class="grid-text"
							:class="group_id == -1 ? 'grid-text-active' : ''">全部</text></u-grid-item>
					<u-grid-item v-for="(item, index) in vote.groups" :key="index" @click="select_group(item.id)">
						<text class="grid-text"
							:class="group_id == item.id ? 'grid-text-active' : ''">{{ item.name }}</text>
					</u-grid-item>
				</u-grid>
				<u-row customStyle="margin-bottom:15px" v-if="person.length > 0">
					<u-col span="1.5">
						<u-text text="排名" size="12" color="#7A848B"></u-text>
					</u-col>
					<u-col span="7.5">
						<u-text text="选手" size="12" color="#7A848B"></u-text>
					</u-col>
					<u-col span="3">
						<u-text text="票数" align="right" size="12" color="#7A848B"></u-text>
					</u-col>
				</u-row>
			</view>
		</u-sticky>
		<view class="persons">
			<u-row v-for="(item, index) in person" :key="index" customStyle="margin-bottom:15px" @click="goto('/pages/vote/person?person_id='+item.id)">
				<u-col span="1.5">
					<u-text :text="index + 1" v-if="index > 2"></u-text>
					<view v-else>
						<u-image src="/static/img/rank1.png" width="45rpx" height="60rpx" v-if="index == 0">
						</u-image>
						<u-image src="/static/img/rank2.png" width="45rpx" height="60rpx" v-if="index == 1">
						</u-image>
						<u-image src="/static/img/rank3.png" width="45rpx" height="60rpx" v-if="index == 2">
						</u-image>
					</view>
				</u-col>
				<u-col span="7.5">
					<u-text :text="item.name" :prefixIcon="imgUrl + item.image" size="28rpx" color="#7A848B" lines="2"
						iconStyle="width:40px;height:40px;border-radius:50%;margin-right:20rpx;"></u-text>
				</u-col>
				<u-col span="3">
					<u-text :text="item.count" align="right" size="16" color="#7A848B" lines="1" bold="true">
					</u-text>
				</u-col>
			</u-row>
			<u-loadmore :status="has_more==true?'loading':'nomore'" />
			
		</view>
		
		<tabbar :vote_id="vote_id" :temp_name="vote.temp_name" v-if="vote"></tabbar>
		
		<music :music="vote.music" v-if="vote"></music>
	</view>
</template>

<script>
	import music from '@/components/music/music.vue';
	import tabbar from '@/components/tabbar/vote-tabbar.vue';
	export default {
		components: {
			tabbar,music
		},
		data() {
			return {
				imgUrl: uni.getStorageSync('cdnurl'),
				vote_id: 0,
				vote: null,
				page: 1,
				has_more: true,
				group_id: -1,
				person: [],
			};
		},
		onLoad: function(options) {
			this.vote_id = options.vote_id;
			this.http('vote/detail', {
				vote_id: this.vote_id
			}, 'get').then(res => {
				this.vote = res.data;
				uni.setNavigationBarTitle({
					title: res.data.name
				});
			});
			this.persons()
		},
		onReachBottom() {
			if (this.has_more) {
				this.persons()
			}
		},
		methods: {
			persons() {
				var data = {};
				data.vote_id = this.vote_id;
				data.page = this.page;
				data.order = 'count';
				if (this.group_id > -1) {
					data.group_id = this.group_id;
				}
				this.http('person/index', data, 'get').then(res => {
					var data = res.data.data;
					this.person = this.person || [];
					this.person = this.person.concat(data);
					this.has_more = res.data.has_more;
					this.page++;
				});
			},
			select_group(group_id) {
				this.group_id = group_id;
				this.person = null;
				this.page = 1;
				this.has_more = true;
				this.persons()
			},
			goto(url){
				this.utils.goto(url)
			}
		}
	};
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.common {
		background-color: #fff;
		padding: 30rpx 50rpx 20rpx;
	}

	.persons {
		background-color: #fff;
		padding: 0 50rpx 15px;
	}

	.grid-text {
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 26rpx;
		background-color: #fff;
		border-radius: 60rpx;
		color: #666666;
		margin-bottom: 10px;
		font-size: 12px;
		min-width: 50px;
		text-align: center;
	}

	.grid-text-active {
		background-image: linear-gradient(270deg, #cc875b 0%, #7e4826 100%) !important;
		color: #fff;
	}
</style>
